<template>
	<!-- 项目管理 -->
	<view class="project2">
		<view class="project2Head">
			<view id="customSelect" class="select-container">
				<img class="select-selected" @click="isStart()" @click.stop="" src="@/static/增加2.png" />
				<view class="select-items select-hide" ref="showPanel" :class="{ isDisplay: isDisplay }">
					<div class="select-item" @click="toAddProject()">新增项目</div>
					<div class="select-item">选项2</div>
					<div class="select-item">选项3</div>
				</view>
			</view>
		</view>

		<view class="projectBody" @touchmove="closeShowMove">
			<view class="projectComponent" v-for="(item, index) in projectDatas" @click="projectInItem(item)"><projectComponentVue :propData="item" /></view>
		</view>
	</view>
</template>

<script>
import projectComponentVue from '@/components/project/projectComponent.vue';
import { request } from '../../request';
export default {
	components: { projectComponentVue },
	data() {
		return {
			selectValue: '456',
			// 是否打开选项卡
			isDisplay: true,
			projectDatas: []
		};
	},
	methods: {
		// 点击事件（进入项目）
		projectInItem(item) {
			uni.navigateTo({
				url: `/pages/project/projectItem?id=${item.id}&date=${item.date}&cost=${item.cost}&users=${item.users}&input=${item.input}&output=${item.output}&name=${item.name}`
			});
		},
		// 是否打开
		isStart() {
			this.isDisplay = !this.isDisplay;
		},
		toAddProject() {
			uni.navigateTo({
				url: '/pages/project/addProject'
			});
		},
		closeShow(e) {
			if (this.$refs.showPanel) {
				let isSelf = this.$refs.showPanel.$el.contains(e.target);
				if (!isSelf) {
					this.isDisplay = true;
				}
			}
		},
		closeShowMove() {
			this.isDisplay = true;
		}
	},
	onShow() {
		document.addEventListener('click', this.closeShow);

		// 遍历加载项目
		request('public/selectAllProject', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.projectDatas = [];
			for (var i = 0; i < res.data.data.length; i++) {
				this.projectDatas.push(res.data.data[i]);
			}
			// console.log(res);
		});
	},

	onHide() {
		this.isDisplay = true;
		// 移除事件监听器，防止内存泄漏
		document.removeEventListener('click', this.closeShow);
	}
};
</script>

<style scoped>
page {
	overflow-x: hidden !important;
}
.project2 {
	width: 100%;
	position: relative;
}
.project2Head {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: fixed;
	background-color: #f5f5f5;
	border-bottom-left-radius: 8%;
	border-bottom-right-radius: 8%;
	z-index: 99;
}
.project2Head img {
	width: 50rpx;
	margin-right: 30rpx;
}

/* 选择模型 */
.select-container {
	position: relative;
	line-height: 1;
}
.select-selected {
	background-color: #eee;
	color: #555;
	cursor: pointer;
	margin: 0;
}

.custom-select div.option {
	transition: background-color 0.3s;
}

.custom-select div.option.active {
	animation: pop 0.3s forwards;
}

@keyframes pop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.select-items {
	position: absolute;
	top: 80rpx;
	left: -180rpx;
	right: 0;
	z-index: 100;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 3px rgba(168, 168, 168, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20rpx;
}
.isDisplay {
	display: none;
}

.select-item {
	margin-top: 30rpx;
}

.selectButton {
	width: 50rpx;
	background-image: url('@/static/增加2.png');
	background-size: 100% 100%;
	border: 0;
}
.projectBody {
	width: 100%;
	height: auto;
	padding-top: 100rpx;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	flex-direction: column;
}
.projectComponent {
	margin-top: 20rpx;
}
</style>
